<template>
  <div class="tool-categories">
    <h2 class="bar-title mb-6 break-words"
      v-if="tool.categories && tool.categories.length>0">
      <span class="text-gray-1000 text-26 font-semibold break-words w-full">{{$t('browseAIToolsSimilarTo')}} {{toolName}}</span>
    </h2>
    <div class="flex items-start flex-wrap gap-x-12 gap-y-3 mt-3 categories-list"
      v-if="tool.categories && tool.categories.length>0">
      <common-link path="/category/:handle"
        :params="{handle:item.handle }"
        v-for="(item, key) in tool.categories"
        :key="item.handle"
        class="text-base text-blue-1100 hover:text-blue-1600 go-category-link">{{$t('browseAITools').replace('[./.]',item.tool_count).replace('[../..]', item.name ? item.name : item.handle)}}</common-link>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'ToolDetailCategories',
  props: {
    tool: {
      type: Object,
      default: function () {
        return {}
      },
    },
    toolName: {
      type: String,
      default: '',
    },
  },
  computed: {
    ...mapState({
      locale: (state) => state.locale,
    }),
  },
  methods: {
    getLocaleText(val, val_locales) {
      if (
        Object.prototype.toString.call(val_locales) === '[object Object]' &&
        typeof val_locales[this.locale] != 'undefined' &&
        val_locales[this.locale] !== null &&
        val_locales[this.locale] !== ''
      ) {
        return val_locales[this.locale]
      } else {
        return val
      }
    },
  },
}
</script>